function View(view, hidden)
{
	this.view = view;
	this.zoom = {};
	
	this.id = '#graph_' + this.view;
	
	$('#graphs').append(
		'<div id="graph_' + this.view + '" class="view">View ' + this.view + '</div>');
	
	$(this.id)
		.bind('selected',    View.selection)
		.bind('click',       View.click)
		.bind('contextmenu', View.contextmenu);
	
	this.hidden = hidden || false;
	this.setHidden = function (hidden)
	{
		this.hidden = hidden;
		
		View.updateAll();
	}
	
	this.plot = function ()
	{
		if (this.dirty === false) {
			return;
		}
		
		var graph = $(this.id);
		
		if (this.hidden) {
			// We're hidden, we should simply hide our div
			graph.css('display', 'none');
			
			this.dirty = false;
			
			return;
		} else {
			graph.css('display', 'block');
			
			View.setDimensions(graph);
		}
		
		// Get list of plotData for streams linked to me
		var streamNames = [], view = this;
		
		jQuery.each(
			Stream.streams, function(name)
			{
				if (this.view === view.view) {
					streamNames.push(name);
				}
			});
		
		// Tri des streams à afficher par ordre alphabétique
		streamNames = streamNames.sort();
		
		var plotData = [];
		
		jQuery.each(
			streamNames, function()
			{
				plotData.push(Stream.streams[this].plot());
			});
		
		// Load Flot graph :
		plot = $.plot(
			graph,
			plotData,
			$.extend(true, {}, {
				legend:    {show:      true},
				xaxis:     {mode:      'time'},
				grid:      {tickColor: '#918FFF'},
				selection: {mode:      'x'}
			},
			this.zoom));
		
		graph.find('tr').draggable(
		{
			helper: 'clone'
		});
		
		graph.find('.legendColorBox div').click(function() {
			$('#openStreams').click();
		});
		
		graph.droppable({
			accept: function(draggable) {
				// Ne sont actives que les vues qui ne possèdent pas déjà le
				// stream actuel
				return $(draggable).parents('#' + this.attr('id')).length === 0;
			},
			activeClass: 'droppable-active',
			hoverClass: 'droppable-hover',
			drop: function(ev, ui) {
				Stream.streams[$(ui.draggable).text()].setView(View.getById(this.id).view);
			}
		});
		
		this.dirty = false;
	}
	
	this.update = function ()
	{
		this.dirty = true;
	};
}
View.views = [];
View.MIN   = 0;
// TODO : Add support for more than 3 views
View.MAX   = 3;

View.updateAll = function()
{
	jQuery.each(
		View.views, function()
		{
			this.update();
		});
}

View.numVisible = function()
{
	var num = 0;
	
	jQuery.each(
		View.views, function()
		{
			if (!this.hidden) {
				num++;
			}
		});
	
	return num;
}

View.setDimensions = function(view)
{
	var numVisibleViews = View.numVisible();
	
	if (numVisibleViews > 2) {
		view.css('width', '49%');
	} else {
		view.css('width', '99%');
	}
	
	if (numVisibleViews > 1) {
		view.css('height', '300px');
	} else {
		view.css('height', '600px');
	}
}

View.getById = function(id)
{
	var view = null;
	jQuery.each(
		View.views, function(i)
		{
			if (this.id === '#' + id) {
				view = this;
				
				return false;
			}
		});
	
	return view;
}

View.selection = function(event, area)
{
	var view = View.getById(event.target.id);
	
	view.zoom = {
		xaxis: { min: area.x1, max: area.x2 }
	};
	
	view.update();
	
	return false;
}

View.click = function (event)
{
	var view = View.getById(event.target.parentNode.id);
	
	if (view.zoom['xaxis'] !== undefined) {
		var min    = view.zoom['xaxis']['min'],
		    max    = view.zoom['xaxis']['max'];
		var x      = (event.layerX - 24) / (event.srcElement.width - 24);
		var shiftX = (max - min) * (x - 1/2);
		
		view.zoom = {
			xaxis: { min: min + shiftX, max: max + shiftX}
		};
	}
	
	view.update();
	
	return false;
}

View.contextmenu = function (event)
{
	var view = View.getById(event.target.parentNode.id);
	
	view.zoom = {};
	
	view.update();
	
	return false;
}

$(function()
{
	for (var i = View.MIN; i <= View.MAX; i++) {
		View.views[i] = new View(i);
	}
	
	View.updateAll();
});
